<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ul>
        <!-- <li>
            <h3></h3>
            <h4></h4>
            <p></p>
        </li> -->
    </ul>

    <script>



        const xhr = new XMLHttpRequest() ;
        xhr.open('get' , '../data/goods.json' , true) ;
        xhr.send() ;
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                let data = xhr.responseText ;
                // console.log(data);
                data = JSON.parse(data) ;
                console.log(data);
                let html = '' ;

                // data.forEach( v => {
                //     html += `
                //         <li>
                //             <h3>${v.name}</h3>
                //             <h4></h4>
                //             <p></p>
                //         </li>
                //     `
                // })

                // data.forEach( v => {
                //     const {name , price , des} = v ;
                // })

                // 解构   
                data.forEach( ({name , price , des}) => {
                    html += `
                        <li>
                            <h3>${name}</h3>
                            <h4>${price}</h4>
                            <p>${des}</p>
                        </li>
                    `
                 
                })
                const oUl = document.querySelector('ul') ;
                oUl.innerHTML = html ;

            }
        }



    </script>
    
</body>
</html>